<script setup>
	import {inject, onMounted, ref, shallowRef} from "vue";
	
	const createList = (list, ifTF = false) => {
		return list.map(item => ({
			label: item,
			value: ifTF ? item === '是' : item
		}));
	}
	
	// 证书等级
	const levelList = createList(['一级', '二级', '三级'])
	// 身份证件
	const idTypeList = createList(['身份证', '其他'])
	const tfList = createList(['是', '否'])
	// 企业性质
	const companyTypeList = createList(['国有企业', '集体企业', '民营企业', '中外合资', '外资企业', '其他'])
	// 经营范围
	const businessScopeList = createList(['国防工程设计施工维护', '智能化建筑', '计算机系统集成', '其他'])
	// 服务领域
	const serviceScopeList = createList(['1.金融', '2.交通/港口', '3.公安/司法', '4.政府机关', '5.文博', '6.院校', '7.能源', '8.生产企业', '9.医疗', '10.物流/商业', '11.智建/社区', '12.公共场所', '13.军工', '14.其他'])
	
	
	const form = ref({
		level: '一级',
		idType: '身份证',
		companyType: null,
		businessScope: null,
		serviceScope: null,
		projectList: [],
	})
	
	const handleCreate = () => {
		return {
			projectName: null,
			projectAmount: null,
			projectField: null
		}
	}
	
</script>

<template>
	<div class="pageContent">
		<n-space
			align="center"
			justify="space-between"
			style="margin-bottom: 20px"
		>
			<n-h6 class="pageTitle" prefix="bar">
				<div>
					证书年检
				</div>
			</n-h6>
		</n-space>
		<n-divider
			class="pageDivider"
		></n-divider>
		
		<n-form
			:label-placement="'top'"
			require-mark-placement="left"
			style="margin-bottom: 10px"
		>
			<n-divider style="--n-color: #666666"><span style="color: #666666;">企业基本信息</span></n-divider>
			<n-grid :cols="2" :x-gap="40">
				<n-form-item-gi :span="1" label="企业名称" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="注册地址" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="注册资本" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="信用代码" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="成立日期" label-style="font-weight: bold">
					<n-date-picker style="width: 100%"></n-date-picker>
				</n-form-item-gi>
				<!--证书等级-->
				<n-form-item-gi :span="1" label="证书等级" label-style="font-weight: bold">
					<n-radio-group v-model:value="form.level">
						<n-space>
							<n-radio v-for="item in levelList" :key="item.value" :value="item.value">
								{{item.label}}
							</n-radio>
						</n-space>
					</n-radio-group>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="信用代码" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="成立日期" label-style="font-weight: bold">
					<n-date-picker style="width: 100%"></n-date-picker>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="证书编号" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="获证时间" label-style="font-weight: bold">
					<n-date-picker style="width: 100%"></n-date-picker>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="社保人数" label-style="font-weight: bold">
					<n-input>
						<template #suffix>
							<n-text italic>人</n-text>
						</template>
					</n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="办公地址" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="办公面积" label-style="font-weight: bold">
					<n-input>
						<template #suffix>
							<n-text italic>人</n-text>
						</template>
					</n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="" label-style="font-weight: bold">
				</n-form-item-gi>
				
				<n-form-item-gi :span="1" label="营业执照" label-style="font-weight: bold">
					<n-upload multiple directory-dnd :accept="'image/jpeg,image/png'" style="width: 100%">
						<n-upload-dragger>
							<div style="margin-bottom: 12px">
								<n-icon size="48" :depth="3">
									<Files />
								</n-icon>
							</div>
							<n-text style="font-size: 16px">
								点击或者拖动文件到该区域来上传
							</n-text>
							<n-p depth="3" style="margin: 8px 0 0 0">
								上传文件限制格式: jpg, jpeg, png大小限5MB内
							</n-p>
						</n-upload-dragger>
					</n-upload>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="相关证书" label-style="font-weight: bold">
					<n-upload multiple directory-dnd :accept="'image/jpeg,image/png'" style="width: 100%">
						<n-upload-dragger>
							<div style="margin-bottom: 12px">
								<n-icon size="48" :depth="3">
									<Files />
								</n-icon>
							</div>
							<n-text style="font-size: 16px">
								点击或者拖动文件到该区域来上传
							</n-text>
							<n-p depth="3" style="margin: 8px 0 0 0">
								上传文件限制格式: jpg, jpeg, png大小限5MB内
							</n-p>
						</n-upload-dragger>
					</n-upload>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">法定代表人信息</span></n-divider>
			<n-grid
				:cols="2" :x-gap="40"
			>
				<n-form-item-gi :span="1" label="法人代表" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="电话" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="身份证件" label-style="font-weight: bold">
					<n-radio-group v-model:value="form.idType">
						<n-space>
							<n-radio v-for="item in idTypeList" :key="item.value" :value="item.value">
								{{item.label}}
							</n-radio>
						</n-space>
					</n-radio-group>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="证件号码" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">联络员信息</span></n-divider>
			<n-grid
				:cols="2" :x-gap="40"
			>
				<n-form-item-gi :span="1" label="姓名" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="职务" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="手机号码" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="座机号码" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">技术负责人信息</span></n-divider>
			<n-grid
				:cols="2" :x-gap="40"
			>
				<n-form-item-gi :span="1" label="姓名" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="职务" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="手机号码" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="座机号码" label-style="font-weight: bold">
					<n-input></n-input>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">主营范围</span></n-divider>
			<n-grid
				:cols="2" :x-gap="40"
			>
				<n-form-item-gi :span="2" label="企业性质" label-style="font-weight: bold">
					<n-checkbox-group v-model:value="form.companyType" style="width: 100%">
						<n-grid :cols="5"y-gap="15">
							<n-gi v-for="item in companyTypeList" span="1">
								<n-checkbox  :key="item.value" :value="item.value">
									{{item.label}}
								</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="经营范围" label-style="font-weight: bold">
					<n-checkbox-group v-model:value="form.businessScope" style="width: 100%">
						<n-grid :cols="5"y-gap="15">
							<n-gi v-for="item in businessScopeList" span="1">
								<n-checkbox  :key="item.value" :value="item.value">
									{{item.label}}
								</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="2" label="服务领域" label-style="font-weight: bold">
					<n-checkbox-group v-model:value="form.serviceScope" style="width: 100%">
						<n-grid :cols="5"y-gap="15">
							<n-gi v-for="item in serviceScopeList" span="1">
								<n-checkbox  :key="item.value" :value="item.value">
									{{item.label}}
								</n-checkbox>
							</n-gi>
						</n-grid>
					</n-checkbox-group>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="从业人员" label-style="font-weight: bold">
					<n-input>
						<template #suffix>
							<n-text italic>人</n-text>
						</template>
					</n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="主营收入" label-style="font-weight: bold">
					<n-input>
						<template #suffix>
							<n-text italic>万元</n-text>
						</template>
					</n-input>
				</n-form-item-gi>
				<n-form-item-gi :span="1" label="年完成安防工程额" label-style="font-weight: bold">
					<n-input>
						<template #suffix>
							<n-text italic>万元</n-text>
						</template>
					</n-input>
				</n-form-item-gi>
			</n-grid>
			
			<n-divider style="--n-color: #666666"><span style="color: #666666;">本年度在建项目</span></n-divider>
			<n-grid
				:cols="2" :x-gap="40"
			>
				<n-form-item-gi :span="2" label="本年度在建项目" label-style="font-weight: bold">
					<div style="width: 100%">
						<n-grid :cols="5" style="margin-bottom: 10px; width: calc(100% - 68px)">
							<n-gi :span="2">
								<div style="font-size: 12px; font-weight: bold">
									项目名称
								</div>
							</n-gi>
							<n-gi :span="1">
								<div style="font-size: 12px; font-weight: bold">
									工程额（万元）
								</div>
							</n-gi>
							<n-gi :span="2">
								<div style="font-size: 12px; font-weight: bold">
									项目所在领域
								</div>
							</n-gi>
						</n-grid>
						<n-dynamic-input v-model:value="form.projectList" @create="handleCreate">
							<template #create-button-default>
								新增项目
							</template>
							<template #default="{ value }">
								<n-grid :cols="5" x-gap="20">
									<n-gi :span="2">
										<n-input v-model:value="value.projectName" />
									</n-gi>
									<n-gi :span="1">
										<n-input v-model:value="value.projectAmount" />
									</n-gi>
									<n-gi :span="2">
										<n-input v-model:value="value.projectField" />
									</n-gi>
								</n-grid>
							</template>
						</n-dynamic-input>
					</div>
				</n-form-item-gi>
			</n-grid>
		</n-form>
		
		<n-space
			justify="center"
		>
			<n-button
				type="primary"
			>
				提交
			</n-button>
		</n-space>
	</div>
</template>

<style scoped>
</style>
